ASP.Net MVC-তে Partial Page Updates এবং AJAX Forms দুটি অত্যন্ত গুরুত্বপূর্ণ বৈশিষ্ট্য, যা ওয়েব অ্যাপ্লিকেশনের রেসপন্সিভনেস এবং পারফরম্যান্স উন্নত করতে সাহায্য করে। এই বৈশিষ্ট্যগুলোর মাধ্যমে আপনি ব্যবহারকারীর অ্যাকশন অনুসারে পেজের একটি নির্দিষ্ট অংশ আপডেট করতে পারেন, পুরো পেজ রিফ্রেশ না করেই। এর ফলে, অ্যাপ্লিকেশনটি দ্রুত এবং আরও ইন্টারঅ্যাকটিভ হয়ে ওঠে।

Partial Page Updates

Partial Page Update এর মাধ্যমে আপনি সম্পূর্ণ পেজটি রিফ্রেশ না করে পেজের এক বা একাধিক অংশ আপডেট করতে পারেন। এটি সাধারণত AJAX ব্যবহার করে করা হয়, যেখানে সার্ভার থেকে শুধুমাত্র সেই অংশের ডেটা রিটার্ন করা হয় যেটি আপডেট করতে হবে, এবং সেই ডেটা HTML ফরম্যাটে ক্লায়েন্টের কাছে পাঠানো হয়। এতে পুরো পেজের রিফ্রেশ করার প্রয়োজন হয় না, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

উদাহরণ:

ধরা যাক, একটি তালিকা রয়েছে এবং ব্যবহারকারী একটি ডেটা আপডেট করার পর সেই তালিকা আপডেট করতে চান। এখানে AJAX ব্যবহার করে পেজের অংশ (তালিকা) আপডেট করা হবে।

1. Controller:

public class StudentController : Controller
{
    // GET: Student/UpdateList
    public ActionResult UpdateList()
    {
        var students = GetStudents(); // মডেল থেকে ডেটা সংগ্রহ করা
        return PartialView("_StudentList", students); // Partial View রিটার্ন করা
    }

    private List<Student> GetStudents()
    {
        return new List<Student>
        {
            new Student { Id = 1, Name = "Rahim", Class = "10" },
            new Student { Id = 2, Name = "Karim", Class = "9" }
        };
    }
}

2. Partial View (_StudentList.cshtml):

@model List<Student>
<table>
    <tr>
        <th>Name</th>
        <th>Class</th>
    </tr>
    @foreach (var student in Model)
    {
        <tr>
            <td>@student.Name</td>
            <td>@student.Class</td>
        </tr>
    }
</table>

3. Main View:

<div id="student-list-container">
    @Html.Action("UpdateList")
</div>

<button id="refreshList">Refresh List</button>

<script>
    $(document).ready(function () {
        $("#refreshList").click(function () {
            $.ajax({
                url: '@Url.Action("UpdateList", "Student")',
                type: 'GET',
                success: function (result) {
                    $("#student-list-container").html(result); // Partial view আপডেট করা
                }
            });
        });
    });
</script>

এখানে, $("#refreshList").click() ইভেন্টের মাধ্যমে AJAX কল করা হয় এবং সার্ভার থেকে শুধুমাত্র UpdateList অ্যাকশন মেথডের ফলাফল (Partial View) রিটার্ন করা হয়, যা পেজের নির্দিষ্ট অংশে আপডেট হয়।

AJAX Forms

AJAX Forms ব্যবহারের মাধ্যমে আপনি ফর্ম সাবমিট করতে পারেন এবং পেজ রিফ্রেশ ছাড়াই ফলাফল প্রদর্শন করতে পারেন। এটি ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং অ্যাপ্লিকেশনটির পারফরম্যান্স বাড়ায়, কারণ পুরো পেজ রিফ্রেশ করা হয় না। AJAX ফর্মে, ব্যবহারকারী একটি ফর্ম সাবমিট করলে, তা সার্ভারে চলে যায়, এবং সার্ভার থেকে রেসপন্স পেলে শুধুমাত্র নির্দিষ্ট অংশ আপডেট করা হয়।

উদাহরণ:

ধরা যাক, আমাদের একটি ফর্ম রয়েছে, যার মাধ্যমে ছাত্রের তথ্য সাবমিট করা হবে। ফর্মটি AJAX ব্যবহার করে সাবমিট করা হবে এবং ফলাফল পেজের একটি অংশে দেখানো হবে।

1. Controller:

public class StudentController : Controller
{
    // POST: Student/Create
    [HttpPost]
    public ActionResult Create(Student student)
    {
        if (ModelState.IsValid)
        {
            // Save student data
            SaveStudent(student);
            return PartialView("_StudentList", GetStudents()); // Partial view return
        }
        return PartialView("_CreateForm", student); // যদি কোনো ত্রুটি থাকে
    }

    private void SaveStudent(Student student)
    {
        // Save student to the database
    }

    private List<Student> GetStudents()
    {
        return new List<Student>
        {
            new Student { Id = 1, Name = "Rahim", Class = "10" },
            new Student { Id = 2, Name = "Karim", Class = "9" }
        };
    }
}

2. Main View:

@using (Html.BeginForm("Create", "Student", FormMethod.Post, new { id = "studentForm" }))
{
    @Html.LabelFor(m => m.Name)
    @Html.TextBoxFor(m => m.Name)
    
    @Html.LabelFor(m => m.Class)
    @Html.TextBoxFor(m => m.Class)

    <input type="submit" value="Submit" />
}

<div id="student-list-container">
    @Html.Action("UpdateList")
</div>

<script>
    $(document).ready(function () {
        $("#studentForm").submit(function (event) {
            event.preventDefault(); // Default form submission বন্ধ করা
            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: $(this).serialize(),
                success: function (result) {
                    $("#student-list-container").html(result); // Partial view আপডেট করা
                }
            });
        });
    });
</script>

এখানে, ফর্মটি AJAX-এর মাধ্যমে সাবমিট করা হয়েছে এবং পেজের পুরো অংশের পরিবর্তে শুধুমাত্র ছাত্রের তালিকা আপডেট করা হয়েছে।

সারমর্ম

Partial Page Updates এবং AJAX Forms দুটি পদ্ধতি ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং অ্যাপ্লিকেশনটি দ্রুত এবং রেসপন্সিভ করতে সহায়ক। Partial Page Updates সার্ভার থেকে শুধুমাত্র অংশবিশেষ ডেটা রিটার্ন করে এবং তা পেজে আপডেট করে, পুরো পেজ রিফ্রেশ না করেই। AJAX Forms ব্যবহারকারীর ফর্ম সাবমিট করার পর পেজ রিফ্রেশ না করে ফলাফল প্রদর্শন করতে সাহায্য করে। এই বৈশিষ্ট্যগুলোর মাধ্যমে অ্যাপ্লিকেশনটির পারফরম্যান্স ও ব্যবহারকারী ইন্টারঅ্যাকশন উন্নত করা যায়।